<li class="border border-accent mb-4">
  <div class="p-4 lg:p-6">
    <div class="flex flex-col lg:flex-row lg:gap-6 gap-4">
      <% ship_address = shipment.address || shipment.order.ship_address %>
      <% if shipment.order.requires_ship_address? && ship_address.present? %>
        <div class="text-sm lg:w-1/2">
          <div class="tracking-widest uppercase mb-2">
            <%= Spree.t(:delivery_address) %>
          </div>
          <div class="!leading-[1.375rem] text-neutral-800">
            <%= render "spree/shared/address",
            address: ship_address %>
          </div>
        </div>
      <% end %>
      <div class="text-sm lg:w-1/2 lg:flex justify-between">
        <div>
          <div class="tracking-widest uppercase mb-2">
            <%= Spree.t(:shipping_method) %>
          </div>
          <div class="!leading-[1.375rem] text-neutral-800">
            <% if shipment.shipping_method.present? %>
              <%= shipment.shipping_method.name %>
            <% else %>
              <%= Spree.t("shipment_states.canceled") %>
            <% end %>
            <br>
            <% if shipment.stock_location.present? %>
              <%= Spree.t(:shipped_from) %>
              <%= shipment.stock_location.name %>
            <% end %>
          </div>
        </div>
        <% unless shipment.digital? %>
          <div class="mt-4 lg:-mt-2 lg:-mr-2">
            <% if shipment.shipped? && shipment.tracked? && shipment.tracking_url.present? %>
              <%= shipment_tracking_link_to(shipment: shipment, name: Spree.t(:track_items), html_options: { class: "!px-3 !py-1 block btn-primary !leading-6 text-sm text-center", target: :_blank }) %>
            <% else %>
              <button
                class="
                  !px-3 !py-1 block btn-primary !leading-6 text-sm text-center
                "
                disabled
              ><%= Spree.t(:track_items) %></button>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    <% if shipment.canceled? && shipment.shipped_at.nil? %>
      <div class="alert-warning text-sm uppercase mt-3 px-3 py-2">
        <strong><%= Spree.t(:shipment) %>
          <%= Spree.t("shipment_states.canceled") %></strong>.
        <%= Spree.t(:shipment_refunded_message) %>
      </div>
    <% elsif (!shipment.tracked? || !shipment.shipped?) && !shipment.digital? %>
      <div class="text-sm uppercase text-center bg-neutral-100 mt-3 px-3 py-2">
        <%= Spree.t(:no_tracking_present) %>
      </div>
    <% end %>
  </div>

  <hr class="border-accent mx-4">

  <div class="grid grid-cols-1 gap-4 lg:gap-6 p-4 lg:p-6">
    <%= render partial: "spree/shared/order_line_item",
    collection: shipment.inventory_units,
    as: :inventory_unit,
    cached: spree_storefront_base_cache_scope %>
  </div>
</li>
